<template>
  <div
    v-title
    data-title="紧急要料台"
    v-loading="gLoad"
    element-loading-text="数据正在提交,请稍后"
    element-loading-spinner="el-icon-loading"
  >
    <el-card class="box-card" shadow="hover">
      <div>
        <el-input
          v-model="scanInput"
          :placeholder="scanInputPlaceholder"
          class="headerInputClass"
          @keydown.enter.native="enterScanInput()"
          ref="scanInputfocus"
          @focus="$event.currentTarget.select()"
          autofocus="autofocus"
        >
        </el-input>
      </div>
      <div>
        <el-descriptions class="margin-top" border :column="3">
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="任务编号"
          >
            {{ BillId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="物料编码"
          >
            {{ CurrentGoods.SkuId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="拉动条码"
          >
            {{ CurrentGoods.PullNumber }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="批次号"
          >
            {{ CurrentGoods.BatchNo }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="物料描述"
          >
            {{ CurrentGoods.SkuName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-row :gutter="12" class="box-card card_box">
      <el-col :span="7">
        <el-card
          shadow="hover"
          class="imageClass_detail imageClass image_height"
          v-show="false"
        >
          <div slot="header" class="clearfix" @click="clickPtl()">
            <span
              >货架位置[<span style="color: red; font-weight: bold">{{
                CurrentGoods.ToLoc
              }}</span
              >]</span
            >
          </div>
          <div class="image_Or" @click="clickPtl()">
            <el-image
              class="TargetLocationImag1"
              :src="Imag.ExchangeAreaImag"
              lazy
            >
            </el-image>
            <el-image
              :src="Imag.OriginalLocationImag"
              class="TargetLocationImag"
              lazy
            ></el-image>
          </div>
        </el-card>
        <!-- <el-col :span="6"> </el-col> -->
        <el-card shadow="hover" class="imageClass_detail" style="height: 50vh">
          <div slot="header" class="clearfix">
            <span
              >容器位置[<span style="color: red; font-weight: bold">{{
                CurrentGoods.FromCID
              }}</span
              >]</span
            >
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.OriginalCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" v-show="false">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>物料图片</span>
          </div>
          <div class="imageClass">
            <el-image
              :src="localhostPath + CurrentGoods.ImgUrl"
              lazy
            ></el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>数量信息</span>
          </div>
          <div>
            <div class="ItemNumInfo" @click="clickCalculator()">
              <span>{{ scansNum }}/{{ scansTotalNum }}</span>
            </div>
            <br /><br />
            <div class="ItemNumlabel">拣货数量/物料数量</div>
            <div class="ItemNumInfoDetail" v-show="false">
              单位：{{ CurrentGoods.Unit }}
            </div>
            <div class="ItemNumInfoDetail" v-show="false">
              规格：<span>{{ CurrentGoods.Spec }}</span>
            </div>
          </div>
          <div style="color: #1b00ff" @click="tableHeightFun()">
            <!-- <el-statistic title="待拣数/总数">
			    <template slot="formatter"> {{ CurrentGoods.PickingCompleted }}/{{ CurrentGoods.PickingCompleted+CurrentGoods.PickingNotCompleted }} </template>
			</el-statistic> -->
            <div class="ItemNumInfoDetail">
              待操作条码：<span>{{ CurrentGoods.PickingCompleted }}</span>
            </div>
            <div class="ItemNumInfoDetail">
              总条码：<span>{{
                CurrentGoods.PickingCompleted + CurrentGoods.PickingNotCompleted
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card
          shadow="hover"
          style=""
          class="imageClass_detailSowText"
          v-show="false"
        >
          <div slot="header" class="clearfix">
            <span>拣货信息</span>
          </div>
          <div class="PickingInfo">
            <span
              >托盘
              <span style="color: red; font-size: 3.5vh">{{ CIDLattice }}</span>
              ： 请取走
              <span style="color: red; font-size: 3.5vh">{{
                CurrentGoods.QtyPlan
              }}</span>
              /
              <span style="color: red; font-size: 2.8vh">{{
                CurrentGoods.PackageProperty
              }}</span></span
            >
          </div>
          <!-- <div class="rotateClass">
						
					</div> -->
        </el-card>
        <!-- <el-col :span="6"> </el-col> -->
        <el-card shadow="hover" class="imageClass_detailSow">
          <div slot="header" class="clearfix">
            <span
              >货架位置[<span style="color: red; font-weight: bold">{{
                CurrentGoods.ToLoc
              }}</span
              >]</span
            >
          </div>
          <div class="imageClassSow">
            <!-- <el-image class="TargetLocationImag1"
							:src="require('../assets/imag/sow/' + 2 + '-' + '0' + '.png')" lazy>
						</el-image> -->
            <el-image
              class="TargetLocationImag1"
              :src="Imag.ExchangeAreaImag"
              lazy
            >
            </el-image>
            <el-image
              :src="Imag.OriginalLocationImag"
              class="TargetLocationImag"
              lazy
            ></el-image>
            <!-- <el-image
              @click="
                BindCIDDialogVisibleFun();
                $nextTick(() => {
                  $refs.BindCIDRef.focus();
                });
              "
              :src="Imag.TargetLocationImag"
              lazy
              class="TargetLocationImag"
            ></el-image> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="card_button">
      <el-button
        @click="
          PrintBarcode(
            CurrentGoods.TaskId,
            CurrentGoods.FlowNo,
            CurrentGoods.DeliveryId,
            CurrentGoods.PullNumber
          )
        "
        :disabled="
          (CurrentGoods.DeliveryId || '') == '' &&
          (CurrentGoods.PullNumber || '') == ''
        "
        >打印条码</el-button
      >
      <el-button
        type="primary"
        @click="
          tableHeightFun();
          PatchPrintList = [];
          activeName = 'first';
        "
        :loading="submit.taskInfo"
        >任务详情
      </el-button>
      <el-button
        type="danger"
        @click="ExceptionButton()"
        :loading="submit.Exception"
        :disabled="disabledFlag"
      >
        异常处理
      </el-button>
      <el-button
        type="success"
        @click="CallOrderBoxVisible = true"
        :loading="submit.bindCID"
        >呼叫订单箱
      </el-button>
      <el-button
        type="success"
        @click="ReturnOrderBoxVisible = true"
        :loading="submit.bindCID"
        >退空
      </el-button>
      <el-button
        type="primary"
        class="buttonClass"
        @click="CompleteTaskButton()"
        :loading="submit.loading"
        :disabled="disabledComFlag"
        >确认拣货
      </el-button>
      <span style="margin-left: 30px"
        >工作台: {{ UserInfo.WbInfo.WbName }}</span
      >
    </el-card>
    <!-- 数字输入  -->
    <el-dialog
      :visible.sync="CalculatorDialogVisible"
      width="30vw"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <Calculator v-on:clickCardOk="clickCardOk" />
    </el-dialog>
    <!--  呼叫订单箱  -->
    <el-dialog
      title="请选择呼叫订单箱的位置"
      :visible.sync="CallOrderBoxVisible"
      width="25%"
      class="dialog_commit"
      :show-close="true"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <el-radio-group v-model="CallOrderBox" size="big">
        <el-radio
          v-for="Items in CallOrderBoxItems"
          v-if="!Items.isReturn"
          :label="Items.value"
          :key="Items.value"
          border
          >{{ Items.lable }}</el-radio
        >
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CallOrderBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="CallOrderBoxFun()">确 定</el-button>
      </span>
    </el-dialog>
    <!--  呼叫料架  -->
    <el-dialog
      title="请选择呼叫料架的位置"
      :visible.sync="MaterialRacksVisible"
      width="25%"
      class="dialog_commit"
      :show-close="true"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <el-radio-group v-model="MaterialRack" size="big">
        <el-radio
          v-for="Items in MaterialRacks"
          :label="Items.LocationId"
          :key="Items.LocationId"
          border
          >{{ Items.LocationId }}</el-radio
        >
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="MaterialRacksVisible = false">取 消</el-button>
        <el-button type="primary" @click="MaterialRacksFun()">确 定</el-button>
      </span>
    </el-dialog>
    <!--  退空  -->
    <el-dialog
      title="请选择需要退空的位置"
      :visible.sync="ReturnOrderBoxVisible"
      width="35%"
      class="dialog_commit"
      :show-close="true"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <el-radio-group v-model="ReturnOrderBox" size="big">
        <el-radio
          v-for="Items in CallOrderBoxItems"
          :label="Items.value"
          :key="Items.value"
          border
          >{{ Items.lable }}</el-radio
        >
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ReturnOrderBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="ReturnOrderBoxFun()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 没有播种位，不可操作 -->
    <el-dialog
      class="dialogTitle"
      title="提示"
      :visible.sync="NoOPTDialogVisible"
      width="40%"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <div>
        <span style="font-size: 2vw">
          请呼叫料架，若已呼叫，请等待料架搬指定位置<br />
          手动刷新页面或等待页面自动刷新</span
        >
      </div>
    </el-dialog>
    <!-- 扫描SKU错误提示-->
    <el-dialog
      title="提示"
      :visible.sync="scanSkuDialogVisible"
      width="30%"
      center
      class="scanSkuDialog"
      :show-close="false"
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <span>请确定扫描的物料是否正确！[{{ CurrentGoods.SkuId }}]</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="scanSkuDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="详细信息"
      :visible.sync="detailedInfoVisible"
      width="80%"
      top="5vh"
      border
      @close="
        $nextTick(() => {
          $refs.scanInputfocus.focus();
        })
      "
    >
      <el-tabs
        v-model="activeName"
        style="margin-top: 2px"
        @tab-click="handleClick"
      >
        <el-tab-pane label="订单信息" name="first">
          <el-table
            :data="AllGoods_Scan"
            :height="tableHeight"
            ref="tableAllGoods"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              property="OrderLineNo"
              label="订单行号"
              width="120px"
              sortable
            ></el-table-column>
            <el-table-column
              property="OrderId"
              label="拣货单号"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="SyncBillId"
              label="投料单号"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="PullNumber"
              label="拉动条码"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="OrderLineNo"
              label="状态"
              width="100px"
              sortable
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.tag"
                  effect="dark"
                  disable-transitions
                  >{{ scope.row.tagStatus }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              property="SkuId"
              label="物料编码"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="SkuName"
              label="物料名称"
              width="300px"
            ></el-table-column>
            <el-table-column
              property="ToLoc"
              label="分拣库位"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="FromCID"
              label="料箱编码"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="QtyPlan"
              label="需求数量"
              width="120px"
              sortable
            ></el-table-column>
            <el-table-column
              property="QtyOut"
              label="分拣数量"
              width="100px"
              sortable
            ></el-table-column>
            <el-table-column
              property="PackSort"
              label="包装顺序"
              width="100px"
              sortable
            ></el-table-column>
            <el-table-column
              property="WaveNum"
              label="装车波次"
              width="250px"
              sortable
            ></el-table-column>
            <el-table-column
              property="CarGroupName"
              label="装车组名称"
              width="250px"
              sortable
            ></el-table-column>
            <el-table-column
              property="ProductLineNum"
              label="产线波次"
              width="250px"
              sortable
            ></el-table-column>
            <el-table-column
              property="BatchNo"
              label="批次号"
              width="350px"
              sortable
            ></el-table-column>
            <el-table-column
              property="SowLoc"
              label="播种位"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="ToCID"
              label="目标料架"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="ToBoxCode"
              label="目标料箱"
              width="200px"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="条码补打" name="second">
          <el-form
            :inline="true"
            ref="form"
            :model="PatchPrint"
            label-width="80px"
          >
            <el-form-item label="拉动条码">
              <el-input v-model="PatchPrint.PullNumber"></el-input>
            </el-form-item>
            <el-form-item label="料架编码">
              <el-input v-model="PatchPrint.ToCID"></el-input>
            </el-form-item>
            <el-form-item label="料箱编码">
              <el-input v-model="PatchPrint.ToBoxCode"></el-input>
            </el-form-item>
            <el-form-item label="投料编码">
              <el-input v-model="PatchPrint.UDF10"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getPatchPrint()"
                >查询</el-button
              >
              <el-button
                @click="
                  PatchPrint = {
                    PullNumber: '',
                    ToCID: '',
                    ToBoxCode: '',
                    DeliveryId: '',
                    UDF10: '',
                  }
                "
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="PatchPrintList"
            :height="tableHeight - 60"
            ref="tableAllGoods"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              property="PullNumber"
              label="拉动条码"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="SkuId"
              label="物料编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="SkuName"
              label="物料名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CarGroupName"
              label="装车组名称"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="ToCID"
              label="目标料架"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="ToBoxCode"
              label="目标料箱"
              width="150px"
            ></el-table-column>

            <el-table-column
              property="BatchNo"
              label="批次号"
              width="350px"
              sortable
            ></el-table-column>
            <el-table-column
              property="ProductLineNum"
              label="产线波次"
              width="100px"
              sortable
            ></el-table-column>
            <el-table-column
              property="WaveNum"
              label="装车组波次"
              width="150px"
              sortable
            ></el-table-column>
            <el-table-column
              property="BillId"
              label="拣货单号"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="DeliveryId"
              label="投料单号"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="UDF10"
              label="投料点编码"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="UDF11"
              label="投料点名称"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="OrderLineNo"
              label="订单行号"
              width="100px"
              sortable
            ></el-table-column>
            <el-table-column
              property="FlowNo"
              label="FlowNo"
              width="100px"
              sortable
            ></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="
                    PrintBarcode(
                      scope.row.TaskId,
                      scope.row.FlowNo,
                      scope.row.DeliveryId,
                      scope.row.PullNumber
                    )
                  "
                  type="text"
                  >打印条码</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 40, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin-top: 1vh; display: flex"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成任务" name="UrgentCompleted">
          <el-form
            :inline="true"
            ref="form"
            :model="UrgentCompletedForm"
            label-width="80px"
          >
            <el-form-item label="产线">
              <el-select
                v-model="UrgentCompletedForm.ProductLineCode"
                clearable
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in PcList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工位">
              <el-select
                v-model="UrgentCompletedForm.StationCode"
                clearable
                filterable
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in StationsList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="拉动条码">
              <el-input
                placeholder="请输入"
                v-model="UrgentCompletedForm.PullNumber"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input
                placeholder="请输入"
                v-model="UrgentCompletedForm.SkuId"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input
                placeholder="请输入"
                v-model="UrgentCompletedForm.SkuName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="计划日期" clearable>
              <el-date-picker
                v-model="UrgentCompletedForm.PlanDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="GetUrgentCompletedData()"
                >查询</el-button
              >
              <el-button
                @click="
                  UrgentCompletedForm = {
                    PullNumber: '',
                    SkuId: '',
                    PlanDate: '',
                  };
                  GetUrgentCompletedData(0, 10);
                "
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="UrgentCompletedData"
            :height="tableHeight"
            ref="tableAllGoods"
            border
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              property="ProductLineCode"
              label="产线编码"
            ></el-table-column>
            <el-table-column
              property="ProductLineName"
              label="产线名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="StationCode"
              label="工位编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="StationName"
              label="工位名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CarGroupCode"
              label="装车组编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CarGroupName"
              label="装车组名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="TaskId"
              label="下架任务单号"
              width="220px"
            ></el-table-column>
            <el-table-column
              property="Status"
              label="状态"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="BillId"
              label="发货通知单号"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="SyncBillId"
              label="同步投料单号"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="OrderLineNo"
              label="订单行号"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="SkuId"
              label="物料编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="SkuName"
              label="物料名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="BatchNo"
              label="批次"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="PullNumber"
              label="拉动条码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CID"
              label="托盘"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="FromLoc"
              label="来源库位"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="ToLoc"
              label="目标库位"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="Qty"
              label="需求数量"
              width="120px"
            ></el-table-column>
            <el-table-column
              property="QtyPlan"
              label="分配数量"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="QtyScan"
              label="拣货数量"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="SupplierCode"
              label="供应商"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="PlanDate"
              label="计划日期"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="CreateDate"
              label="创建时间"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="AllocatedDate"
              label="分配时间"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="ModifyDate"
              label="完成时间"
              width="180px"
            ></el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChangeC"
              @current-change="handleCurrentChangeC"
              :current-page="currentPageC"
              :page-sizes="[10, 20, 40, 100, 200]"
              :page-size="pageSizeC"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UrgentCompletedTotal"
              style="margin-top: 1vh; display: flex"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未完成任务" name="UrgentNoCompleted">
          <el-form
            :inline="true"
            ref="form"
            :model="UrgentNoCompletedForm"
            label-width="80px"
          >
            <el-form-item label="产线">
              <el-select
                v-model="UrgentNoCompletedForm.ProductLineCode"
                clearable
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in PcList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工位">
              <el-select
                v-model="UrgentNoCompletedForm.StationCode"
                clearable
                filterable
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in StationsList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="拉动条码">
              <el-input
                placeholder="请输入"
                style="width: 180px"
                v-model="UrgentNoCompletedForm.PullNumber"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input
                placeholder="请输入"
                style="width: 180px"
                v-model="UrgentNoCompletedForm.SkuId"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input
                placeholder="请输入"
                style="width: 180px"
                v-model="UrgentNoCompletedForm.SkuName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="UrgentNoCompletedForm.StatusCode"
                clearable
                style="width: 180px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in KbTaskList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计划日期">
              <el-date-picker
                style="width: 180px"
                v-model="UrgentNoCompletedForm.PlanDate"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="GetUrgentNoCompletedData()"
                >查询</el-button
              >
              <el-button
                @click="
                  UrgentNoCompletedForm = {
                    PullNumber: '',
                    SkuId: '',
                    PlanDate: '',
                    StatusCode: '',
                  };
                  GetUrgentNoCompletedData(0, 10);
                "
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="UrgentNoCompletedData"
            :height="tableHeight"
            ref="tableAllGoods"
            border
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              property="ProductLineCode"
              label="产线编码"
            ></el-table-column>
            <el-table-column
              property="ProductLineName"
              label="产线名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="StationCode"
              label="工位编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="StationName"
              label="工位名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CarGroupCode"
              label="装车组编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CarGroupName"
              label="装车组名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="TaskId"
              label="下架任务单号"
              width="220px"
            ></el-table-column>
            <el-table-column
              property="Status"
              label="状态"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="BillId"
              label="发货通知单号"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="SyncBillId"
              label="同步投料单号"
              width="200px"
            ></el-table-column>
            <el-table-column
              property="OrderLineNo"
              label="订单行号"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="SkuId"
              label="物料编码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="SkuName"
              label="物料名称"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="BatchNo"
              label="批次"
              width="250px"
            ></el-table-column>
            <el-table-column
              property="PullNumber"
              label="拉动条码"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="CID"
              label="托盘"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="FromLoc"
              label="来源库位"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="ToLoc"
              label="目标库位"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="Qty"
              label="需求数量"
              width="120px"
            ></el-table-column>
            <el-table-column
              property="QtyPlan"
              label="分配数量"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="QtyScan"
              label="拣货数量"
              width="100px"
            ></el-table-column>
            <el-table-column
              property="SupplierCode"
              label="供应商"
              width="150px"
            ></el-table-column>
            <el-table-column
              property="PlanDate"
              label="计划日期"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="CreateDate"
              label="创建时间"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="AllocatedDate"
              label="分配时间"
              width="180px"
            ></el-table-column>
            <el-table-column
              property="ModifyDate"
              label="完成时间"
              width="180px"
            ></el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChangeNC"
              @current-change="handleCurrentChangeNC"
              :current-page="currentPageNC"
              :page-sizes="[10, 20, 40, 100, 200]"
              :page-size="pageSizeNC"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UrgentNoCompletedTotal"
              style="margin-top: 1vh; display: flex"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <audioPaly :audioValue="audioPaly"></audioPaly>
  </div>
</template>

<script>
import Arithmetic from "@/utils/ArithmeticMethod.js";
import { createSocket } from "@/utils/WebSocket";
import {
  GETLocationInfo,
  GetCIDInfo,
  GetSomPickingTaskInfo,
  UnBindLocationCID,
  OrderBoxCall,
  PTL_ACTION,
  BindLocationCID,
  PostSomPickingTaskInfo,
  emergentPickTask,
  emergentPickPostTask,
  printPullNumber,
  MaterialRacksCall,
  pickingscan,
  POSTLocationInfo,
  getpatch,
  UrgentCompletedApi,
  GuiStationsApi,
  UrgentNoCompletedApi,
  getKbTaskStatusAPI,
} from "@/api/api.js";
import Calculator from "@/components/pluginunit/Calculator.vue";
import audioPaly from "@/components/pluginunit/audioPaly.vue";
// import moment from "moment";
export default {
  name: "InventoryOPT",
  props: ["searchVal"],
  components: {
    Calculator,
    audioPaly,
  },
  data() {
    return {
      PatchPrint: { PullNumber: "", ToCID: "", ToBoxCode: "", UDF10: "" },
      UrgentCompletedForm: {
        PullNumber: "",
        SkuId: "",
        SkuName: "",
        PlanDate: "",
        ProductLineCode: "",
        StationCode: "",
      },
      UrgentNoCompletedForm: {
        PullNumber: "",
        SkuId: "",
        PlanDate: "",
        SkuName: "",
        StatusCode: "",
        ProductLineCode: "",
        StationCode: "",
      },
      StationsList: [],
      PcList: [
        {
          label: "DGA北区气盖加工一线",
          value: "DGA",
        },
        { label: "DPB北区喷漆包装线", value: "DPB" },
        { label: "DSY北区试车线", value: "DSY" },
        { label: "DTA北区机体加工一线", value: "DTA" },
        { label: "DZA北区装配线", value: "DZA" },
      ],
      PatchPrintList: [],
      KbTaskList: [],
      UrgentCompletedData: [],
      UrgentNoCompletedData: [],
      submit: {
        loading: false,
        bindCID: false,
        taskInfo: false,
        Exception: false,
      },
      BindCIDDialogVisible: false, // 绑定料线对话框
      scanSkuDialogVisible: false, // 扫描提示对话框
      disabledFlag: true, //按钮是否启用标识
      disabledComFlag: true,
      MaterialRacksVisible: false,
      tableHeight: 620,
      TaskInfodisabledFlag: true,
      detailedInfoVisible: false,
      NoOPTDialogVisible: false,
      BindInfoDisabled: false,
      BindInfo: {
        BindCID: "",
        BindLocationID: "",
        BindBoxCode: "",
      },
      localhostPath: "",
      audioPaly: "",
      // 扫描框内容
      scanInput: "",
      // 扫描框当前扫描类型
      scanType: "OrderID",
      scanInputPlaceholder: "",
      scanInputFlag: true,
      scanInputType: {
        OrderID: "暂无需要扫描的订单.....",
        SkuID: "请扫描物料编码.....",
        BatchNo: "请选择批次编码.....",
        CID: "请扫描容器编码.....",
        OK: "请确认数量后点完成.....",
      },
      // 指定目标库位和目标箱
      TargetBox: "",
      TargetLocation: "",
      Imag: {
        OriginalLocationImag: "",
        OriginalCIDImag: "",
        TargetLocationImag: "",
        TargetCIDImag: "",
        ExchangeAreaImag: "",
      },
      // 订单箱
      CallOrderBoxItems: [
        { lable: "订单箱(一)", value: "OrderBox1", isReturn: false },
        { lable: "订单箱(二)", value: "OrderBox2", isReturn: false },
        { lable: "原料箱跺", value: "OrderBoxHeap", isReturn: true },
      ],
      MaterialRacks: [],
      MaterialRack: "",
      CallOrderBox: "",
      CallOrderBoxVisible: false,
      ReturnOrderBoxVisible: false,
      ReturnOrderBox: "",
      // 当前扫描物料信息（显示）
      CurrentGoods: {
        BillId: "",
        SkuId: "",
        SkuName: "",
        ImgUrl: "",
        BatchNo: "",
        PickingNotCompleted: 0,
        PickingCompleted: 0,
      },
      BillId: "",
      // 全部应扫描物料
      AllGoods: [],
      // 剩余应扫描物料
      ScannedGoods: [],
      // 扫描记录
      ScanRecord: [],
      // 页面显示应扫描数
      scansTotalNum: 0.0,
      // 页面显示当前已扫描数
      scansNum: 0.0,
      // 输入框标识
      CalculatorDialogVisible: false,
      CIDLattice: "",
      UserInfo: {
        WbInfo: {
          WbName: "",
        },
      },
      CommitFrom: {
        CID: "",
        LocationId: "",
      },
      WarehouseId: "",
      StorerId: "",
      goodsInfo: {},
      timer: "",
      getSocketData: null,
      AllGoods_Scan: [],
      inputNum: false,
      //   ---
      ptl_url: "ws://localhost:13145/Ptl",
      print_url: "ws://localhost:13145/Print?UserId=",
      login_url: "ws://localhost:13145/Login?UserId=",
      ws: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null,
      },
      setIntervalWesocketPush: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null,
      },
      activeName: "first",
      //灯颜色
      ColorEnum: {
        red: 1,
        green: 2,
        blue: 3,
        yellow: 4,
        pink: 5,
        cyan: 6,
        white: 7,
      },
      currentPage: 1,
      currentPageC: 1,
      currentPageNC: 1,
      total: 0,
      UrgentCompletedTotal: 0,
      UrgentNoCompletedTotal: 0,
      pageSize: 10,
      pageSizeC: 10,
      pageSizeNC: 10,
      // ----
      gLoad: false,
    };
  },
  created() {
    this.UserInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.init();
    this.GetGuiStationsData();
    this.getKbTaskStatus();
    this.GetUrgentCompletedData();
    this.GetUrgentNoCompletedData();
    setTimeout(() => {
      this.GETTaskInfo();
      this.getUrlPath();
      this.getSOWLocationId();
    }, 1500);
  },
  beforeDestroy() {
    //离开页面移除监听器页面销毁时，移除监听器，这样就不会导致重复监听。
    clearTimeout(this.timer);
  },
  methods: {
    GetGuiStationsData() {
      const params = {};
      GuiStationsApi(params)
        .then((res) => {
          console.log("GuiStationsApi", res);
          this.StationsList = res.data.data;
        })
        .catch((error) => {
          throw error;
        });
    },
    getKbTaskStatus() {
      const params = {};
      getKbTaskStatusAPI(params)
        .then((res) => {
          this.KbTaskList = res.data.data;
        })
        .catch((error) => {
          throw error;
        });
    },
    GETTaskTimer() {
      this.timer = null;
      this.timer = setTimeout(() => {
        this.GETTaskInfo();
      }, 15000);
    },
    GETTaskInfo() {
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbInfo.WbId,
        time: Date.parse(new Date()),
      };
      this.AllGoods_Scan = [];
      //   this.gLoad = true
      emergentPickTask(params)
        .then((res) => {
          const result = res.data.data;
          var goodsInfo = {};
          if (res.data.code == 0 && result.length != 0) {
            this.audioPlay("ok");
            this.AllGoods = result;
            var item = {};
            for (var k = 0; k < this.AllGoods.length; k++) {
              this.AllGoods[k].QtyPlan = parseFloat(this.AllGoods[k].QtyPlan);
              item = this.AllGoods[k];
              item.QtyOut = 0;
              item.Success = false;
              item.tag = k == 0 ? "success" : "info";
              item.tagStatus = k == 0 ? "拣选中" : "待拣选";
              this.AllGoods_Scan.push(item);
            }
            this.TaskInfodisabledFlag =
              this.AllGoods.length != 0 ? false : true;
            this.CurrentGoods = result[0];
            this.BillId = this.CurrentGoods.TaskId;
            this.NoOPTDialogVisible =
              this.CurrentGoods.SOWStatus == 1 ? false : true;
            this.MaterialRacksVisible = this.NoOPTDialogVisible;
            try {
              this.TargetLocation = this.CurrentGoods.SowLoc;
              this.TargetBox = this.CurrentGoods.SowCID;
              this.CurrentGoods.SowCID = "";
              // this.SowLocationSearch(this.TargetLocation, 'TargetLocationImag')
              this.LocationSearch(
                this.CurrentGoods.ToLoc,
                "OriginalLocationImag"
              );
              this.ImageCIDSearch(
                this.CurrentGoods.FromCID,
                "OriginalCIDImag",
                true
              );
            } catch (e) {
              //TODO handle the exception
            }
            this.CurrentGoods.QtyPlan = parseFloat(this.CurrentGoods.QtyPlan);
            this.CurrentGoods.QtyError = 0;

            this.scansTotalNum = parseFloat(this.CurrentGoods.QtyPlan);
            this.CIDLattice = this.CurrentGoods.FromCID;
            try {
              this.CurrentGoods.UpcCodes =
                this.CurrentGoods.UpcCodes.split(",");
              let getLocation = this.CurrentGoods.UpcCodes.indexOf("");
              this.CurrentGoods.UpcCodes.splice(getLocation, 1);
              this.CurrentGoods.UpcCodes.push(this.CurrentGoods.SkuId);
            } catch (e) {
              this.CurrentGoods.UpcCodes = [this.CurrentGoods.SkuId.toString()];
            }
            // 亮灯
            this.PTL_Lighting(
              this.CurrentGoods.ToLoc,
              Arithmetic.accSub(
                this.CurrentGoods.AllQty,
                this.CurrentGoods.QtyPlan
              ) <= 0
                ? this.ColorEnum.red
                : this.ColorEnum.green
            );
            this.CurrentGoods.QtyIn = 0;
            this.scanInputMethod("SkuID");
            this.BindInfo.BindCID = this.CurrentGoods.SowCID;
            this.BindInfo.BindBoxCode = this.CurrentGoods.SowBoxCode;
            this.BindInfo.BindLocationID = this.CurrentGoods.SowLoc;
            this.BindCIDDialogVisible = false;
            this.BindInfoDisabled = true;
            this.ImageCIDSearch(this.TargetBox, "TargetCIDImag");
            this.scanTaskInfo(this.CurrentGoods.OrderId);
            this.ScanSkuInfo(this.CurrentGoods.SkuId);
          } else {
            this.scanInputMethod("OrderID");
          }
          // this.gLoad = false
        })
        .catch((error) => {
          this.scanInputMethod("OrderID");
          throw error;
        });
    },
    tableRowClassName({ row, rowIndex }) {
      return row.tag;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getPatchPrint();
    },
    handleSizeChangeC(val) {
      this.currentPageC = 1;
      this.pageSizeC = val;
      this.GetUrgentCompletedData();
    },
    handleSizeChangeNC(val) {
      this.currentPageNC = 1;
      this.pageSizeNC = val;
      this.GetUrgentNoCompletedData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPatchPrint();
    },
    handleCurrentChangeC(val) {
      this.currentPageC = val;
      this.GetUrgentCompletedData();
    },
    handleCurrentChangeNC(val) {
      this.currentPageNC = val;
      this.GetUrgentNoCompletedData();
    },
    getPatchPrint() {
      if (
        this.PatchPrint.PullNumber == "" &&
        this.PatchPrint.ToCID == "" &&
        this.PatchPrint.ToBoxCode == "" &&
        this.PatchPrint.UDF10 == ""
      ) {
        this.$message({
          message: "请输入查询条件",
          type: "warning",
        });
        return;
      }
      var params = {
        PullNumber: this.PatchPrint.PullNumber,
        ToCID: this.PatchPrint.ToCID,
        ToBoxCode: this.PatchPrint.ToBoxCode,
        DeliveryId: this.PatchPrint.DeliveryId,
        UDF10: this.PatchPrint.UDF10,
        pageIndex: this.currentPage - 1,
        pageSize: this.pageSize,
      };
      getpatch(params)
        .then((res) => {
          this.PatchPrintList = res.data.data;
          this.total = res.data.total;
        })
        .catch((error) => {
          throw error;
        });
    },
    GetUrgentCompletedData(pageIndex, pageSize) {
      let PlanDate = "";
      if (this.UrgentCompletedForm.PlanDate) {
        PlanDate = new Date(this.UrgentCompletedForm.PlanDate);
        const formatter = new Intl.DateTimeFormat("zh-Hans-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
        });
        PlanDate =
          formatter.format(PlanDate).split("/").join("-") + " 00:00:00";
      }
      var params = {
        WbId: this.UserInfo.WbInfo.WbId,
        PullNumber: this.UrgentCompletedForm.PullNumber,
        PlanDate,
        SkuName: this.UrgentCompletedForm.SkuName,
        SkuId: this.UrgentCompletedForm.SkuId,
        ProductLineCode: this.UrgentCompletedForm.ProductLineCode,
        StationCode: this.UrgentCompletedForm.StationCode,
        pageIndex: pageIndex == 0 ? pageIndex : this.currentPageC - 1,
        pageSize: pageSize ? pageSize : this.pageSizeC,
      };
      UrgentCompletedApi(params)
        .then((res) => {
          this.UrgentCompletedData = res.data.data;
          this.UrgentCompletedTotal = res.data.totalcount;
          if (pageIndex == 0) {
            this.currentPageC = 1;
            this.pageSizeC = 10;
          }
        })
        .catch((error) => {
          throw error;
        });
    },
    GetUrgentNoCompletedData(pageIndex, pageSize) {
      let PlanDate = "";
      if (this.UrgentNoCompletedForm.PlanDate) {
        PlanDate = new Date(this.UrgentNoCompletedForm.PlanDate);
        const formatter = new Intl.DateTimeFormat("zh-Hans-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
        });
        PlanDate =
          formatter.format(PlanDate).split("/").join("-") + " 00:00:00";
      }
      var params = {
        WbId: this.UserInfo.WbInfo.WbId,
        PullNumber: this.UrgentNoCompletedForm.PullNumber,
        StatusCode: this.UrgentNoCompletedForm.StatusCode,
        // PlanDate: this.UrgentNoCompletedForm.PlanDate,
        SkuName: this.UrgentNoCompletedForm.SkuName,
        ProductLineCode: this.UrgentNoCompletedForm.ProductLineCode,
        StationCode: this.UrgentNoCompletedForm.StationCode,
        PlanDate,
        SkuId: this.UrgentNoCompletedForm.SkuId,
        pageIndex: pageIndex == 0 ? pageIndex : this.currentPageNC - 1,
        pageSize: pageSize ? pageSize : this.pageSizeNC,
      };
      UrgentNoCompletedApi(params)
        .then((res) => {
          this.UrgentNoCompletedData = res.data.data;
          this.UrgentNoCompletedTotal = res.data.totalcount;
          if (pageIndex == 0) {
            this.currentPageNC = 1;
            this.pageSizeNC = 10;
          }
        })
        .catch((error) => {
          throw error;
        });
    },
    scanTaskInfo(BillId) {
      const par = {
        BillId: BillId,
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbInfo.WbId,
        time: Date.parse(new Date()),
      };
      pickingscan(par)
        .then((res) => {
          const result = res.data.data;
          var goodsInfo = {};
          if (res.data.code == 0 && result.length != 0) {
            var item = {};
            for (var k = 0; k < result.length; k++) {
              item = result[k];
              item.QtyPlan = parseFloat(item.QtyPlan);
              item.QtyOut = parseFloat(item.QtyOut);
              item.Success = true;
              item.tag = "danger";
              item.tagStatus = "已拣选";
              this.AllGoods_Scan.push(item);
            }
          }
        })
        .catch((error) => {
          throw error;
        });
    },
    tableHeightFun() {
      this.detailedInfoVisible = true;
      try {
        this.tableHeight =
          this.WindowsSize[1] - this.$refs.tableAllGoods.$el.offsetTop - 380;
        this.$refs.tableAllGoods.doLayout();
      } catch (e) {
        //TODO handle the exception
      }
      // this.tableHeight = this.WindowsSize[1]-this.$refs.tableAllGoods.$el.offsetTop - 10
    },
    // 完成任务
    CompleteTaskButton(flag = false) {
      if (
        this.CurrentGoods.QtyError === this.CurrentGoods.QtyError &&
        this.CurrentGoods.QtyIn === this.CurrentGoods.QtyIn &&
        this.CurrentGoods.QtyPlan === this.CurrentGoods.QtyPlan
      ) {
        console.log(
          parseFloat(this.CurrentGoods.QtyError),
          parseFloat(this.CurrentGoods.QtyIn),
          parseFloat(this.CurrentGoods.QtyPlan)
        );
        if (
          parseFloat(this.CurrentGoods.QtyError) +
            parseFloat(this.CurrentGoods.QtyIn) !=
            parseFloat(this.CurrentGoods.QtyPlan) &&
          this.$route.name == "PickingOPT"
        ) {
          this.audioPlay("error");
          this.$message({
            message: "请按照指定出库数出库",
            type: "error",
          });
          this.PTL_Lighting(this.CurrentGoods.ToLoc, this.ColorEnum.green);
          return;
        }
        if (
          this.CurrentGoods.SowCID == "" &&
          this.$route.name == "PickingOPT_Emergent"
        ) {
          this.audioPlay("error");
          this.$message({
            message: "请扫描目标托盘",
            type: "error",
          });
          this.PTL_Lighting(this.CurrentGoods.ToLoc, this.ColorEnum.green);
          return;
        }
        this.submit.loading = true;
        this.gLoad = true;
        this.CurrentGoods.UserId = this.UserInfo.UserId;
        this.CurrentGoods.time = Date.parse(new Date());
        if (flag === this.CurrentGoods.ToLoc || flag === false) {
          emergentPickPostTask(this.CurrentGoods).then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              this.audioPlay("success");
              this.$message({
                type: "success",
                message: res.data.message,
              });
              var DeliveryId = this.CurrentGoods.DeliveryId;
              var PullNumber = this.CurrentGoods.PullNumber;
              var TaskId = this.CurrentGoods.TaskId;
              var FlowNo = this.CurrentGoods.FlowNo;
              this.PrintBarcode(TaskId, FlowNo, DeliveryId, PullNumber);
              this.PTL_OFF(this.CurrentGoods.ToLoc, true);
              this.scanInputMethod("OrderID", false);
              this.GETTaskInfo();
              this.gLoad = false;
            } else {
              this.audioPlay("error");
              this.$message({
                message: res.data.message,
                type: "error",
              });
              this.gLoad = false;
            }
          });
        } else {
          this.PTL_OFF(flag, true);
          this.gLoad = false;
        }
        this.submit.loading = false;
      }
    },
    // 绑定料箱
    BindCIDButton() {
      if (this.BindInfo.BindCID == "") {
        this.audioPlay("error");
        this.$message({
          message: "请扫描库位编码",
          type: "error",
        });
        this.submit.bindCID = false;
        return;
      }
      if (this.BindInfo.BindBoxCode == "") {
        this.audioPlay("error");
        this.$message({
          message: "请扫描订单箱编码",
          type: "error",
        });
        this.submit.bindCID = false;
        return;
      }
      if (
        this.BindInfo.BindLocationID === this.CurrentGoods.SowLoc &&
        this.CurrentGoods.SowCID === this.BindInfo.BindCID &&
        this.CurrentGoods.SowBoxCode === this.BindInfo.BindBoxCode
      ) {
        this.$message({
          message: "数据未变化，不参与提交",
          type: "error",
        });
        return;
      }
      this.submit.bindCID = true;
      const params = {
        LocationId: this.BindInfo.BindLocationID,
        BoxCode: this.BindInfo.BindBoxCode,
        BillId: this.BillId,
        CID: this.BindInfo.BindCID,
        UserId: this.UserInfo.UserId,
        time: Date.parse(new Date()),
      };
      this.gLoad = true;
      BindLocationCID(params)
        .then((res) => {
          const result = res.data.data;
          if (res.data.code == 0) {
            this.audioPlay("success");
            this.$message({
              message: "成功！",
              type: "success",
            });
            if (this.BindInfo.BindLocationID == this.TargetLocation) {
              this.TargetBox = this.BindInfo.BindCID;
              this.CurrentGoods.ToCID = this.TargetBox;
              this.CurrentGoods.SowCID = this.TargetBox;
              this.CurrentGoods.SowBoxCode = this.BindInfo.BindBoxCode;
              this.ImageCIDSearch(this.BindInfo.BindCID, "TargetCIDImag", true);
            }
            this.BindCIDDialogVisible = false;
            // this.BindInfo = {
            //   BindCID: '',
            //   BindLocationID: '',
            //   BindBoxCode: ''
            // }
            this.submit.bindCID = false;
            if (
              this.CurrentGoods.SkuId != undefined ||
              this.CurrentGoods.SkuId !== ""
            ) {
              if (this.CurrentGoods.QtyIn == 0)
                this.ScanSkuInfo(this.CurrentGoods.SkuId);
            }
          } else {
            this.audioPlay("error");
            this.$message({
              message: res.data.message,
              type: "error",
            });
            this.submit.bindCID = false;
          }
          this.gLoad = false;
        })
        .catch((error) => {
          this.$message({
            message: "请刷新当前页面",
            type: "error",
          });
          throw error;
        });
    },
    BindCIDDialogVisibleFun() {
      this.BindCIDDialogVisible = true;
    },
    CallOrderBoxFun() {
      console.log("CallOrderBoxFun", this.CallOrderBox);
      const params = {
        OrderBoxItem: this.CallOrderBox,
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbId,
        TaskType: "load",
      };
      OrderBoxCall(params)
        .then((res) => {
          if (res.data.code == 0) {
            this.audioPlay("success");
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.CallOrderBoxVisible = false;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
            this.audioPlay("error");
          }
        })
        .catch((error) => {
          this.audioPlay("error");
          this.$message({
            message: "请刷新当前页面",
            type: "error",
          });
          throw error;
        });
    },
    clickPtl() {
      this.PTL_Lighting(this.CurrentGoods.ToLoc, this.ColorEnum.green);
    },
    MaterialRacksFun() {
      if (this.MaterialRack == "") {
        this.$message({
          message: "请选择需要呼叫的料架",
          type: "error",
        });
        return;
      }
      const params = {
        MaterialRack: this.MaterialRack,
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbId,
      };
      MaterialRacksCall(params)
        .then((res) => {
          if (res.data.code == 0) {
            this.audioPlay("success");
            this.$message({
              message: "成功！",
              type: "success",
            });
            this.MaterialRacksVisible = false;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
            this.audioPlay("error");
          }
        })
        .catch((error) => {
          this.audioPlay("error");
          this.$message({
            message: "请刷新当前页面",
            type: "error",
          });
          throw error;
        });
    },
    ReturnOrderBoxFun() {
      console.log("ReturnOrderBoxFun", this.ReturnOrderBox);
      const params = {
        OrderBoxItem: this.ReturnOrderBox,
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbId,
        TaskType: "unload",
      };
      OrderBoxCall(params)
        .then((res) => {
          if (res.data.code == 0) {
            this.audioPlay("success");
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.ReturnOrderBoxVisible = false;
          } else {
            this.audioPlay("error");
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.audioPlay("error");
          this.$message({
            message: "请刷新当前页面",
            type: "error",
          });
          throw error;
        });
    },
    // 扫描SKU
    ScanSkuInfo(value) {
      if (
        Array.isArray(this.CurrentGoods.UpcCodes) &&
        this.CurrentGoods.UpcCodes.indexOf(value) == -1
      ) {
        this.audioPlay("error");
        this.$message({
          type: "error",
          message: "物料UPC不在库存",
        });
        return;
      }
      if (this.CurrentGoods.QtyPlan <= this.CurrentGoods.QtyIn) {
        this.audioPlay("error");
        this.$message({
          type: "error",
          message: "扫描数不能超过出库数",
        });
      }
      if (this.CurrentGoods.PackageProperty == "CARTON") {
        var num = parseFloat(this.CurrentGoods.CartonPcs);
      } else if (this.CurrentGoods.PackageProperty == "PCS") {
        var num = 1;
      } else {
        this.audioPlay("error");
        this.$message({
          type: "error",
          message: "系统错误，请联系管理员",
        });
        return;
      }
      if (this.CurrentGoods.QtyPlan == this.CurrentGoods.QtyIn) {
        this.CurrentGoods.QtyIn = Arithmetic.accAdd(
          parseFloat(this.CurrentGoods.QtyIn),
          0
        );
      } else {
        this.CurrentGoods.QtyIn = Arithmetic.accAdd(
          parseFloat(this.CurrentGoods.QtyIn),
          num
        );
      }
      this.CurrentGoods.QtyIn = this.CurrentGoods.QtyPlan;
      this.disabledComFlag = false;
      this.inputNum = true;
      this.scansNum = parseFloat(this.CurrentGoods.QtyIn);
      this.audioPlay("ok");
      this.scanInputMethod("CID");
    },
    // 判断应扫描数是否大于等于输入扫描数
    clickCardOk(value) {
      if (
        this.CurrentGoods.PackageProperty == "CARTON" &&
        value % this.CurrentGoods.CartonPcs != 0
      ) {
        this.audioPlay("error");
        this.$message({
          message: "请按照箱规数量输入拣货数",
          type: "error",
        });
        return;
      }
      // if ( value % 1.0 != 0) {
      // 	this.audioPlay('error')
      // 	this.$message({
      // 		message: '请输入整数',
      // 		type: 'error'
      // 	});
      // 	return
      // }
      if (
        parseFloat(this.scansTotalNum) >= parseFloat(value) &&
        parseFloat(value) >= 0.0
      ) {
        this.scansNum = parseFloat(value);
        this.CurrentGoods.QtyIn = parseFloat(value);
        this.CalculatorDialogVisible = false;
      } else {
        this.$message({
          message: "扫描数不能大于应扫描总数",
          type: "warning",
        });
      }
    },
    getSOWLocationId() {
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbId,
        time: Date.parse(new Date()),
      };
      POSTLocationInfo(params).then((res) => {
        if (res.data.code === 0 && res.data.data.length >= 1) {
          sessionStorage.removeItem("SOWLocationId");
          sessionStorage.setItem(
            "SOWLocationId",
            JSON.stringify(res.data.data)
          );
          this.MaterialRacks = JSON.parse(
            sessionStorage.getItem("SOWLocationId")
          );
        } else {
          this.$message({
            message: "登录工作台无播种库位",
            type: "info",
          });
        }
      });
    },
    focus(val = true) {
      if (!val) {
        return;
      }
      const params = {
        UserId: this.UserInfo.UserId,
        LocationId: this.BindInfo.BindLocationID,
        time: Date.parse(new Date()),
      };
      this.gLoad = true;
      GETLocationInfo(params)
        .then((res) => {
          var result = res.data.data[0];
          if (res.data.code == 0 && res.data.data.length > 0) {
            if (result.CID == "") {
              this.MaterialRacksVisible = true;
              this.BindCIDDialogVisible = false;
              this.$message({
                message:
                  "[" +
                  this.BindInfo.BindLocationID +
                  "]库位无料架请先呼叫料架",
                type: "error",
              });
            } else if (result.CID == this.BindInfo.BindCID) {
              this.BindInfoDisabled = true;
              this.$nextTick(() => {
                this.$refs.BindCIDRef.focus();
              });
            } else {
              if (this.BindInfo.BindCID != "") {
                this.audioPlay("notexist");
                this.$message({
                  message:
                    "料架编码错误，请确定料架[" +
                    this.BindInfo.BindCID +
                    "]是否在库位[" +
                    this.BindInfo.BindLocationID +
                    "]",
                  type: "error",
                });
              }
              this.BindInfo.BindCID = "";
              this.BindInfo.BindBoxCode = "";
              this.$nextTick(() => {
                this.$refs.BindLocatinRef.focus();
              });
            }
          } else {
            this.audioPlay("notexist");
            this.$message({
              message:
                "料架编码错误，请确定料架[" +
                this.BindInfo.BindCID +
                "]是否在库位[" +
                this.BindInfo.BindLocationID +
                "]",
              type: "error",
            });
          }
          this.gLoad = false;
        })
        .catch((error) => {
          throw error;
        });
    },
    // WEBSOCKET 开始
    async init(socket_type = true, connect_num = 0) {
      if (socket_type === true || socket_type === "ptl_ws") {
        this.ws.ptl_ws = null;
        this.ws.ptl_ws = new WebSocket(this.ptl_url);
        this.ws.ptl_ws.currSocketId = "ptl_ws";
        this.ws.ptl_ws.connect_num = connect_num;
        this.ws.ptl_ws.currSocketName = "库位灯程序";
        this.ws.ptl_ws.onopen = this.ws_connect;
        this.ws.ptl_ws.onmessage = this.PtlOnMessage;
        this.ws.ptl_ws.onerror = this.ws_error;
      }
      if (socket_type === true || socket_type === "login_ws") {
        this.ws.login_ws = null;
        this.ws.login_ws = new WebSocket(this.login_url + this.UserInfo.UserId);
        this.ws.login_ws.currSocketId = "login_ws";
        this.ws.login_ws.currSocketName = "WET登录";
        this.ws.login_ws.onopen = this.ws_connect;
        this.ws.login_ws.connect_num = connect_num;
        this.ws.login_ws.onmessage = function (e) {
          console.log("登录在线.....");
        };
        this.ws.login_ws.onerror = this.ws_error;
        this.ws_connect_login();
      }
      if (socket_type === true || socket_type === "print_ws") {
        this.ws.print_ws = null;
        this.ws.print_ws = new WebSocket(this.print_url + this.UserInfo.UserId);
        this.ws.print_ws.currSocketId = "print_ws";
        this.ws.print_ws.connect_num = connect_num;
        this.ws.print_ws.currSocketName = "打印机程序";
        this.ws.print_ws.onopen = this.ws_connect;
        this.ws.print_ws.onmessage = function (e) {
          console.log("打印机_OnMessage");
        };
        this.ws.print_ws.onerror = this.ws_error;
      }
    },
    ws_error(e) {
      this.onerrorWS(e.currentTarget);
    },
    onerrorWS(ws) {
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId]);
      console.log(ws.currSocketName, ws);
      if (ws.readyState === 3 && ws.connect_num < 3) {
        this.$message({
          message: ws.currSocketName + "连接失败,重连中......",
          type: "error",
        });
        setTimeout(() => {
          this.init(ws.currSocketId, ws.connect_num + 1);
        }, 10000);
      } else {
        this.$message({
          message:
            "" + ws.currSocketName + "连接失败，无法重新连接，请联系管理员！",
          type: "error",
        });
      }
    },
    ws_connect(e) {
      this.sendPing(e.currentTarget);
    },
    ws_connect_login() {
      if (this.ws.login_ws.readyState === 1) {
        var command = {
          RemoteUrl: this.UserInfo.RemoteUrl,
        };
        this.ws.login_ws.send(JSON.stringify(command));
      } else {
        setTimeout(() => {
          this.ws_connect_login();
        }, 1500);
      }
    },
    sendPing(ws, time = 15000, ping = "ping.....") {
      console.log(ws.currSocketName + " 连接成功......");
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId]);
      this.setIntervalWesocketPush[ws.currSocketId] = setInterval(() => {
        ws.send(ping);
      }, time);
    },
    PtlOnMessage(e) {
      const data = JSON.parse(e && e.data);
      console.log(data);
      if (data.Type === "PTL_Lighting") {
        var Loc = data.Id.split("_")[0];
        if (data.Code == 0) {
          this.$message({
            type: "success",
            message: "【" + Loc.toString() + "】,亮灯成功!",
          });
        } else {
          this.$message({
            type: "error",
            message:
              Loc.toString() + " _ " + data.Message.toString() + ",亮灯失败!",
          });
        }
      } else if (data.Type === "PTL_Close") {
        console.log("PTL_Close", data);
      } else if (data.Type.toLowerCase() === "ptl_off") {
        this.PTL_OFF(this.CurrentGoods.ToLoc, false);
        this.PTL_OFF(this.TargetLocation, false);
        this.CompleteTaskButton(data.Data.Tag);
      } else {
        this.$message({
          type: "error",
          message: "WET消息错误",
        });
      }
    },
    //
    async PTL_Lighting(LocationId, Color) {
      const params = {
        Id:
          (LocationId || "").toString() + "_" + new Date().getTime().toString(),
        Type: "PTL_Lighting",
        Data: {
          Tag: LocationId,
          Num: (this.CurrentGoods.QtyPlan || "").toString(),
          Mode: "1",
          Color: Color,
          Updown: "2",
          Locator: "",
          Message: this.CurrentGoods.SkuId || "",
          PressOff: "1",
        },
      };
      if ((LocationId || "") != "") {
        this.$message({
          type: "warning",
          message: "发送点亮库位【" + LocationId.toString() + "】信号",
        });
        this.ws.ptl_ws.send(JSON.stringify(params));
      }
    },
    async PTL_Close(LocationId) {
      const params = {
        Id: new Date().getTime().toString(),
        Type: "PTL_Close",
        Data: {
          Tag: LocationId,
        },
      };
      this.ws.ptl_ws.send(JSON.stringify(params));
    },
    async PTL_OFF(LocationId, flag = false) {
      this.PTL_Close(LocationId);
      //   this.scanInputMethod('OrderID', false)
      //   if (flag) {
      //     this.GETTaskInfo()
      //   }
    },
    ScanBox(value) {
      this.CurrentGoods.SowCID = value;
      this.audioPlay("ok");
      this.scanInputMethod("OK");
    },
    // 打印条码
    PrintBarcode(TaskId, FlowNo, DeliveryId, PullNumber) {
      console.log("this.ws.print_ws", DeliveryId, PullNumber);
      if (
        DeliveryId == undefined ||
        PullNumber == undefined ||
        DeliveryId == "" ||
        PullNumber == ""
      ) {
        this.$message({
          type: "error",
          message: "当前拉动条码或同步单号为空，请确认",
        });
        this.audioPlay("error");
        return;
      }
      var command = [
        {
          TaskId: PullNumber + "_" + Date.parse(new Date()).toString(),
          WarehouseId: "06",
          StorerId: "WCD",
          MenuId: "M891",
          Action: "Print",
          DataSourceParameter:
            "{'DeliveryId':'" +
            (DeliveryId || "").toString() +
            "','PullNumber':'" +
            (PullNumber || "").toString() +
            "','TaskId':'" +
            (TaskId || "").toString() +
            "','FlowNo':'" +
            (FlowNo || "").toString() +
            "','PrintType':'2'}",
        },
      ];
      console.log("this.ws.print_ws", command);
      this.ws.print_ws.send(JSON.stringify(command));
      const params = {
        UserId: this.UserInfo.UserId,
        DeliveryId: DeliveryId,
        PullNumber: PullNumber,
      };
      printPullNumber(params)
        .then((res) => {
          const result = res.data;
          if (result.code == 0) {
            this.$message({
              type: "success",
              message:
                (PullNumber || "").toString() + "当前拉动条码已发送打印机",
            });
          } else {
            this.$message({
              type: "error",
              message: "请重新打印",
            });
            this.audioPlay("error");
          }
        })
        .catch((error) => {
          this.$message({
            message: "请刷新当前页面",
            type: "error",
          });
          throw error;
        });
    },
    audioPlay(value) {
      this.audioPaly = value;
      setTimeout(() => {
        this.audioPaly = "";
      }, 10);
    },
    enterScanInput() {
      if (!this.checkInputEmpty()) {
        return;
      }
      const value = this.scanInput.replace(/\ +/g, "").replace(/[\r\n]/g, "");
      this.scanInput = value;
      // SKU编码
      if (this.scanType == "SkuID") {
        this.ScanSkuInfo(value);
      }
      // 扫描源箱
      else if (this.scanType == "CID") {
        this.ScanBox(value);
      } else if (this.scanType == "OK") {
        this.ScanBox(value);
      } else {
        this.$message({
          message: "系统错误，请刷新当前页面",
          type: "error",
        });
        return;
      }
      this.$nextTick(() => {
        this.$refs.scanInputfocus.focus();
      });
    },
    // 库位图展示
    LocationSearch(value, type) {
      const params = {
        UserId: this.UserInfo.UserId,
        LocationId: value,
        time: Date.parse(new Date()),
      };
      GETLocationInfo(params)
        .then((res) => {
          var result = res.data.data[0];
          if (res.data.code == 0) {
            this.audioPlay("ok");
            this.Imag[type] = this.ImageViewerUrl(
              result.LRow,
              result.LColumn,
              result.LLayer
            );
            this.Imag["ExchangeAreaImag"] = this.ExchangeAreaImagUrl(
              result.LRow,
              result.LColumn,
              result.LLayer
            );
          } else {
            this.audioPlay("notexist");
            this.$message({
              message: "目标库位错误，请确定库位是否正确",
              type: "error",
            });
          }
        })
        .catch((error) => {
          throw error;
        });
    },
    // 库位图展示
    SowLocationSearch(value, type) {
      if (value == "") {
        return;
      }
      var RCL = value.split("-");
      try {
        // this.Imag[type] = this.ImageViewerUrl(parseInt(RCL[1]), parseInt(RCL[2]), parseInt(RCL[1]))
        this.Imag[type] = require("../assets/imag/sow/" +
          (parseInt(RCL[2]) % 2).toString() +
          "-1.png");
      } catch (e) {
        //TODO handle the exception
        this.Imag[type] = "";
      }
      // this.Imag[type] = require('../assets/imag/sow/' + parseInt(RCL[1]) + '-' + parseInt(RCL[2]) + '-' + parseInt(RCL[3]) + '.png')
    },
    getUrlPath() {
      let wPath = window.document.location.href;
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pathName = this.$route.path;
      let pos = wPath.indexOf(pathName);
      // 获取主机地址，如：http://localhost:8080
      this.localhostPath = wPath.substring(0, pos).split("#")[0];
      this.localhostPath = this.localhostPath.substring(
        0,
        this.localhostPath.length - 1
      );
    },
    ImageCIDSearch(value, type, status = true) {
      status = true; //value.split('-').length === 1
      var values = [];
      if (status) {
        values = [1, 1];
      } else {
        values = [6, value.split("-")[1]];
      }
      try {
        this.Imag[type] = require("../assets/imag/tote/" +
          parseInt(values[0]) +
          "-" +
          parseInt(values[1]) +
          ".png");
      } catch (e) {
        //TODO handle the exception
        this.Imag[type] = "";
      }
    },
    ImageViewerUrl(LRow, LColumn, LLayer) {
      try {
        return require("../assets/imag/shewc/" +
          LColumn +
          "-" +
          LLayer +
          ".png");
      } catch (e) {
        console.log("ImageViewerUrl", e.toString());
        return "";
      }
    },
    ExchangeAreaImagUrl(LRow, LColumn, LLayer) {
      try {
        // 面朝播种位。背后为右  右为单数  左为双
        let imag = "";
        if (parseInt(LRow) % 2) {
          imag = "right";
        } else {
          imag = "left";
        }
        return require("../assets/imag/shewc/" + imag + ".png");
      } catch (e) {
        console.log("ImageViewerUrl", e.toString());
        return "";
      }
    },

    // 改变扫描框
    scanInputMethod(newType, flag = true) {
      if (this.scanInputType[newType] === undefined) {
        return;
      }
      clearTimeout(this.timer);
      this.timer = null;
      if (newType == "OrderID") {
        this.Imag = {
          OriginalLocationImag: "",
          OriginalCIDImag: "",
          TargetLocationImag: "",
          TargetCIDImag: "",
        };
        this.CurrentGoods = {
          PickingNotCompleted: 0,
          PickingCompleted: 0,
        };
        this.BillId = "";
        // 全部应扫描物料
        this.AllGoods = [];
        // 已扫描物料
        this.ScannedGoods = [];
        // 显示扫描记录
        this.ScanRecord = [];
        // 页面显示应扫描数
        this.scansTotalNum = 0;
        // 页面显示当前已扫描数
        this.scansNum = 0;
        this.WarehouseId = "";
        this.StorerId = "";
        this.disabledFlag = true;
        this.disabledComFlag = true;
        this.TargetBox = "";
        this.inputNum = false;
        this.BindInfoDisabled = false;
        this.CIDLattice = "";
        this.TargetLocation = "";
        this.AllGoods_scan = [];
        if (
          (this.$route.name == "InventoryOPT" ||
            this.$route.name == "PickingOPT" ||
            this.$route.name == "TallyOpt") &&
          flag
        ) {
          this.GETTaskTimer();
        }
      }
      this.scanInput = "";
      this.scanInputPlaceholder = this.scanInputType[newType];
      this.scanType = newType;
    },
    // 点击计算器验证
    clickCalculator() {
      if (this.scanType == "SkuID" && this.inputNum) {
        this.CalculatorDialogVisible = true;
        return;
      }
      this.audioPlay("error");
      this.$message({
        message: "获取订单并且扫描SKU后才能对数量进行操作",
        type: "error",
      });
    },
    // 检查输入扫描框是否为空
    checkInputEmpty() {
      if (this.TargetBox == "") {
        this.audioPlay("error");
        this.$message({
          message: "指定播种库位上无料箱，请先绑定料箱",
          type: "error",
        });
        this.BindCIDDialogVisible = true;
        return false;
      }
      return true;
    },
  },
  watch: {
    searchVal: function (val) {
      console.log(val); // 接收父组件的值
      this.WindowsSize = val;
    },
  },
  mounted() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-table .danger {
  background: RGBA(242, 133, 76, 0.8);
}
.el-table .info {
  background: rgba(255, 255, 255, 0.8);
}
.el-table .success {
  background: rgba(139, 186, 48, 0.8);
}
.my-label {
  font-size: 1.3vw;
  width: 10vw;
  /* font-weight: 550 !important; */
  text-align: center !important;
  color: #000000 !important;
}

.my-content {
  color: #000000;
  font-size: 1.3vw;
  /* font-weight: 550 !important; */
  width: 40vw;
}
</style>
<style scoped lang="scss">
.card_box {
  margin-top: 5px;
}

.card_button {
  margin-top: 20px;
  height: 10vh;
  border: none;
  display: flex;
  margin-left: 6vw;

  .el-card__body {
    & > .el-button {
      margin-left: 1vw;
    }
  }
}

.BindCIDInputClass {
  /deep/.el-input-group__prepend {
    font-size: 2vh;
    color: black;
  }

  /deep/.el-input__inner {
    height: 6vh;
    font-size: 3vh;
  }

  margin-bottom: 2vh;
}

.dialogTitle {
  /deep/.el-dialog__title {
    font-size: 1.5vw;
  }

  /deep/.el-dialog__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    // line-height: 5vh;
    height: 8vh;

    span {
      height: 3vh;
      font-size: 1.5vw;

      button {
        border-radius: 3px;
        margin-right: 50px;
        margin-left: 50px;
      }
    }
  }
}

.box-card_detail {
  height: 50vh;
}

.paddingStyle {
  /deep/.el-card__body {
    padding: 0px !important;
  }
}

.dialog_commit {
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        font-size: 2.5vh;
        line-height: 4vh;
      }

      .el-form-item__content {
        .el-input {
          /deep/.el-input__inner {
            height: 5vh;
            font-size: 2.5vh;
          }
        }
      }
    }
  }
  .el-radio-group {
    .el-radio {
      border-radius: 12px;
      height: 60px;
      width: 150px;
      font-size: 25px;
    }
  }
}

.scanSkuDialog {
  /deep/.el-dialog__header {
    .el-dialog__title {
      font-size: 1.3vw;
    }
  }

  .el-dialog__body {
    span {
      font-size: 1.3vw;
    }
  }
}

.ItemNumInfo {
  font-size: 7.5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ff0000;
  margin-top: 2vh;
}

.ItemNumlabel {
  font-size: 3vh;
  margin-top: 1vh;
}

.ItemNumInfoDetail {
  font-size: 3vh;
  margin-top: 2vh;
  // border: 1px solid #CCCCCC;
}

.imageClass {
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 50%;
      width: 32vh;
    }
  }
}
.image_Or {
  position: relative;
  height: 100%;
  .TargetLocationImag1 {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .TargetLocationImag {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0);
  }
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 100%;
      width: 32vh;
    }
  }
}
.image_height {
  /deep/.el-card__body {
    height: 20vh;
  }
}
.image_heightSow {
  /deep/.el-card__body {
    height: 50vh;
  }
}
.imageClassSow {
  position: relative;
  height: 100%;

  .el-image {
    // &>img {
    /deep/.el-image__inner {
      // height: 25vh;
      // width: 26.5vw;
      height: 43vh;
      //width: 48.5vh;
    }
  }

  .TargetLocationImag1 {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }

  .TargetLocationImag {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
  }
}

.rotateClass {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  /deep/.el-image {
    height: 45vh;
    transform: rotate(90deg);
  }
}

.imageClass_detail {
  height: 25vh;
}

.imageClass_detailSow {
  height: 50vh;
}

.imageClass_detailSowText {
  height: 15vh;
}

.buttonClass {
  width: 200px;
  height: 70px;
  font-size: 25px;
}

// .pagination {
// 	margin-top: 20px;
// 	text-align: right;
// }
// .el-form-item {
//     margin-bottom: 0px !important;
// }
// .el-form {
// 	display: flex;
// }
// 顶部扫描框
.headerInputClass {
  height: 11vh;

  /deep/ .el-input__inner {
    height: 100%;
    font-size: calc(100vh - 93vh);
    background-color: rgb(84, 105, 122);
    color: #ffffff;
  }

  /deep/ .el-input__inner::-webkit-input-placeholder {
    color: #ffffff;
  }
}

.el-message-box {
  .el-message-box__content {
    .el-message-box__container {
      .el-message-box__message {
        & > p {
          font-size: 25px;
        }
      }
    }
  }
}

.PickingInfo {
  font-size: 3vh;
  text-align: center;
  align-items: center;
  align-content: center;
  line-height: 7vh;
}

// 卡片头部
/deep/.el-card__header {
  padding: 8px 32px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
